<template>
  <div>
    <div class="title-box">
      <div class="title-head">邮件详情</div>
      <div class="title-hint">
        <span class="title-hint-num">0</span>
        <span class="title-hint-type">已发送</span>
      </div>
      <div class="title-hint">
        <span class="title-hint-num">1000</span>
        <span class="title-hint-type">封剩</span>
      </div>
    </div>
    <div class="searching">
      <span>起始时间</span>
      <el-date-picker
        v-model="valueDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <el-button type="primary" @click="searchInfo">搜索</el-button>
    </div>
    <el-row>
      <el-col :span="20">
      <div id="echartContainer" style="width:1000px; height:600px" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      valueDate: '',
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    searchInfo() { },
    initChart() {
      this.chart = echarts.init(document.getElementById('echartContainer'))
      console.log(this.chart);
      // 绘制图表
      this.chart.setOption({
        backgroundColor: '#FFF',
        grid: {
          top: '9%',
          bottom: '19%',
          left: '6%',
          right: '4%'
        },
        tooltip: {
          trigger: 'axis',
          label: {
            show: true
          }
        },
        xAxis: {
          boundaryGap: true,
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          data: [
            '2019-06-01', '2019-06-02', '2019-06-03', '2019-06-04', '2019-06-05', '2019-06-06',
            '2019-06-07', '2019-06-08', '2019-06-09', '2019-06-10'
          ]
        },
        yAxis: {
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(33,148,246,0.2)'
            }
          },
          axisTick: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: 'rgb(245,250,254)'
            }
          }
        },
        series: [{
          type: 'line',
          symbol: 'circle',
          symbolSize: 7,
          lineStyle: {
            color: 'rgb(33,148,246)',
            shadowBlur: 12,
            shadowColor: 'rgb(33,148,246,0.9)',
            shadowOffsetX: 1,
            shadowOffsetY: 1
          },
          itemStyle: {
            color: 'rgb(33,148,246)',
            borderWidth: 1,
            borderColor: '#FFF'
          },
          label: {
            show: false,
            distance: 1
          },
          data: [
            2000, 1800, 2800, 6600, 4000,
            3000, 2030, 3356, 1900, 5000
          ]
        }]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.title-box {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff0f5;
  border-bottom: 1px solid #eee;
  .title-head {
    font-size: 14px;
  }
  .title-hint {
    margin-left: 20px;
    font-size: 12px;
    .title-hint-num {
      color: #1cbdef;
    }
    .title-hint-type {
      color: #3b3b3b;
    }
  }
}
.searching {
  margin: 20px 0;
}
</style>
